<template>
  <el-affix :offset="75">
    <div ref="content" class="content layout_width">
      <div class="navBar">
        <router-link v-for="(item, index) in state.menu" :key="index" class="nav_item" :to="item.path"
          @click="go_page(index)">
          <span :class="{ 'font-bold': index === state.findIndex }">{{ item.name }}</span>
        </router-link>
      </div>
    </div>
  </el-affix>
</template>

<script setup lang="ts">
// 导入Vue中所需的函数和模块
import { onMounted, reactive } from 'vue';
import { pageStyleInfoStore, navBarSelectState } from '@/stores/info/index' // 导入全局状态变量
import { onBeforeRouteUpdate } from 'vue-router';

// 访问全局状态变量
const appStore = pageStyleInfoStore();
const selectedBar = navBarSelectState()

// 定义一个响应式状态对象
const state = reactive({
  // 页面菜单项
  menu: [{
    path: "/index",
    name: "首页"
  }, {
    path: "/reservePage",
    name: "心理预约"
  },
  {
    path: "/articlePage",
    name: "心理文章"
  },
  {
    path:"/noticePage",
    name:"通知公告"
  }
],
  // 当前选中菜单项的索引
  findIndex: selectedBar.selected ? selectedBar.selected:0
})

// 在组件挂载后执行的生命周期钩子
onMounted(() => {
  // 设置选中的导航栏项
  selectedBar.setSelected(state.findIndex)
})

// 页面跳转方法
const go_page = (index: number) => {
  state.findIndex = index;
  selectedBar.setSelected(state.findIndex)

  // 滚动窗口到指定高度
  window.scrollTo(0, appStore.height);
};

// 检查当前路由页的标签
const checkIndex = () => {
  const href = selectedBar.selected

  // 设置当前选中的菜单项
  state.findIndex = href
  // 滚动窗口到指定高度
  window.scrollTo(0, appStore.height);
}

// 在路由更新前执行的生命周期钩子
onBeforeRouteUpdate(() => {
  // 检查当前页的标签
  checkIndex();
});

</script>

<style scoped>
.content {
  margin-top: 5px;
  background-color: rgb(228, 235, 233);
  margin-bottom: 10px;
}

.navBar {
  display: flex;
  font-size: 20px;
  color: rgb(239, 236, 236);
}

.nav_item {
  flex: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transition: color 0.3s, background-color 0.3s;
}

.nav_item:hover {
  background-color: rgb(60, 140, 215);
}

.nav_item:hover span {
  color: white;
}
</style>
